<template>
    <Dialog :app-dialog="appDialog">
        <div class="content" v-html="content"></div>
    </Dialog>
</template>
<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { ref, reactive, computed, watch } from 'vue';
import Dialog from '@/components/Dialog.vue';

const emit = defineEmits(['submit', 'cancel']);
const content = ref('确认删除所选内容吗？');
// 取消
const cancelHandel = () => {
    emit('cancel');
    appDialog.visible = false;
};
//确定删除
const submitHandel = async () => {
    emit('submit');
    cancelHandel();
};
const appDialog = reactive({
    visible: false,
    title: '删除提醒',
    width: '400px',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '确定'
});
defineExpose({
    appDialog,
    content
});
</script>
<style lang="scss" scoped>
.content {
    height: 100px;
    line-height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
</style>
